<div nz-row>
    <div nz-col nzSpan="24">
        <div class="mb-md ml-xl" style="text-align: right;">
            <button nz-button nzType="primary" (click)="add()">新增公里数</button>
            <button class="ml-md" nz-button nzType="primary" (click)="save()">保存</button>
        </div>
        <nz-table #groupingTable [nzData]="data" nzBordered nzSize="small" [nzFrontPagination]="false"
            [nzScroll]="{ x: '1200px' }" [nzShowPagination]="false" class="ml-xl" style="max-width: 750px;">
            <thead>
                <tr>
                    <th rowspan="2" nzWidth="200px" nzAlign="center" nzLeft>公里数</th>
                    <th rowspan="2" nzWidth="130px" nzAlign="center">计算方式</th>
                    <th nzWidth="220px" nzAlign="center" *ngFor="let item of headers">车长（米）</th>
                    <th rowspan="2" nzWidth="60px" nzAlign="center" nzRight>操作</th>
                </tr>
                <tr>
                    <th nzWidth="220px" nzAlign="center" *ngFor="let item of headers;let i = index">
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label style="width: 65px;text-align: right;"> {{item.startLength}}</label>
                            <label>-</label>
                            <div>
                                <nz-input-number [ngModel]="item.endLength" (ngModelChange)="changeEndLength($event,i)"
                                    [nzMin]="0" nzSize="small" disabled>
                                </nz-input-number>（含）
                            </div>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of groupingTable.data;let i = index">
                    <td nzWidth="200px" nzAlign="center" nzLeft>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label style="width: 65px;text-align: right;"> {{item.startKm}}</label>
                            <label>-</label>
                            <div>
                                <nz-input-number [ngModel]="item.endKm" (ngModelChange)="changeEndKm($event,i)"
                                    [nzMin]="0" nzSize="small">
                                </nz-input-number>（含）
                            </div>
                        </div>
                    </td>
                    <td nzWidth="130px" nzAlign="center">{{computeMode[item.computeMode] }}</td>
                    <td nzWidth="220px" nzAlign="center" *ngFor="let node of item.configValue">
                        <div style="display: flex;align-items: center;justify-content: center;">
                            <label>最高</label>
                            <nz-input-number [(ngModel)]="node.maxPrice" [nzMin]="0" nzSize="small" style="width: 55px;"
                                class="ml-sm mr-sm">
                            </nz-input-number>
                            <label>预警</label>
                            <nz-input-number [(ngModel)]="node.ewPrice" [nzMin]="0" nzSize="small" style="width: 55px;"
                                class="ml-sm">
                            </nz-input-number>
                        </div>
                    </td>
                    <td nzWidth="60px" nzAlign="center" nzRight>
                        <a *ngIf="i === groupingTable.data.length-1 && groupingTable.data.length>2" nz-popconfirm
                            nzPopconfirmTitle="是否确认删除?" (nzOnConfirm)="deleteRow(i)">删除</a>
                    </td>
                </tr>
            </tbody>
        </nz-table>


    </div>
</div>